<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>The Raxan Framework</title>
    <link href="../raxan/styles/master.css" rel="stylesheet" type="text/css" />
    <!--[if IE]><link rel="stylesheet" href="../raxan/styles/master.ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>

<body>

    <div class="container c39">

        <p>&nbsp;</p>
        <h1>The Raxan Framework</h1>
        <hr />

        <div class="column panel c8">
            <div class="pb1"></div><div class="pb2"></div><div class="pm1">
                <h5 class="pnl-header">Table of Content</h5>
                <ul class="hlf-pad">
                    <li><a href="index.html">Overview</a></li>
                    <li><a href="getting-started.html">Getting Started</a></li>
                    <li><a href="your-first-page.html">Your First Page</a></li>
                    <li><a href="code-behind.html">Code-Behind Page</a></li>
                    <li class="lightgray"><a href="quick-reference-css.html">CSS Framework</a></li>
                    <li><a href="quick-reference-htmlobject.html">Quick Reference</a></li>
                    <li><a href="../css-examples/index.html">Examples</a></li>
					<li><a href="plugins.html">Rich Plugins</a></li>
                    <li><a href="vision.html">The Vision</a></li>
                    <li><a href="roadmap.html">The Roadmap</a></li>
                    <li><a href="credits.html">Credits/Ackns.</a></li>
                </ul>
            </div><div class="pb2 pb3"></div><div class="pb1 pb4"></div>
        </div>

        <div class="column c29 prepend1">
              <h2>CSS Quick Reference</h2>

              <p>A list of classes that are currently available with the framework.</p>


              <h3>Typography Classes</h3>
              Use these classes to modify the look and feel of text within the page.
              <ul>
                <li><strong>small  <br /></strong></li>
                <li><strong>large<br /></strong></li>
                <li><strong>quiet<br /></strong></li>
                <li><strong>loud</strong></li>
                <li><strong>highlight</strong></li>
                <li><strong>added</strong></li>
                <li><strong>removed</strong></li>
                <li><strong>caps</strong></li>
                <li><strong>fancy</strong></li>
              </ul>

              <h3>Grid Classes</h3>
              <ul>
                <li><strong>c1, c2, ..., c50, c60, c70, c80, c90, c100</strong> - Use these classes to set the
                column width of an element (1 cell width = 20px).  <br />For Example: &lt;div class=&quot;c10&quot;&gt;&lt;/div&gt;</li>
                <li><strong>r1, r2, ..., r50</strong> - Use these classes to set the row height of an element
                (1 cell height = 20px ).<br />For Example: &lt;div class=&quot;c10 r10&quot;&gt;&lt;/div&gt;</li>
                <li><strong>container</strong> - Defines a container for columns and other html elements.
                A container must be used to define the outer limits of the page. <br />For example: &lt;div class=&quot;container c40&quot;&gt;Page Content goes here...&lt;/div&gt;<br /></li>
                <li><strong>column</strong> - Converts an element into a column with a 10px right margin. Used with grid cell classes
                such as c1, ... and r1,...  For Example: &lt;div class="column c5"&gt;&lt;/div&gt;</li>
                <li><strong>last </strong> - Used by the last column in the row to remove the column
                margin.</li>
                <li><strong>clear</strong> - Clear floats</li>
                <li><strong>elastic</strong> - Allows the browser to automatically calculate the width of a div element to fit the available space</li>
                <li><strong>e10,e20,...,e100</strong> - Use these elastic classes to set the percentage (%) width of an element in increments of 10.
                <br />For Example: &lt;div class=&quot;e10&quot;&gt;&lt;/div&gt;. <br />This will stretch the width of the div element to occupy 10% of it's parent element.</li>
                <li><strong>h10,h20,...,h100</strong> - Use these elastic classes to set the percentage (%) height of an element in increments of 10.
                <br />For Example: &lt;div class=&quot;e10 h10&quot;&gt;&lt;/div&gt;. <br />This will stretch the width and height of the div element to occupy 10% of it's parent element.</li>
              </ul>

              <h3>Button Classes</h3>
              <ul>
                <li><strong>button</strong> - Used to style an input button or a hyperlink</li>
                <li><strong>ok, cancel, process, continue, disabled</strong> - Used to set button color and state.</li>
              </ul>

              <h3>Form Classes<br /></h3>
              <ul>
                <li><strong>textbox</strong>- Used to style a textboxes and textareas.</li>
              </ul>

              <h3>Border Classes</h3>
              <ul>
                <li><strong>border</strong> - Creates a 1px border around an element</li>
                <li><strong>tpb,  rtb,  bmb, ltb</strong> - Used to add a top, right, bottom or left border to
                an element</li>
                <li><strong>colborder</strong> - Add right border to a column</li>
                <li><strong>round</strong> - Used to create 5px round courners. Requires FF or Safari.</li>
              </ul>

              <h3>Box Classes</h3>
              <ul>
                <li><strong>box,  alert,  info,  notice,  error,  success</strong></li>
                <li><strong>box-title</strong> - Outlines a box title</li>
                <li><strong>shadow</strong> - Used with shadow box markup. See templates/shadowbox.html</li>
                <li><strong>toolbar</strong> - Used with toolbar markup. See templates/toolbar.html</li>
              </ul>

              <h3>Color Classes</h3>
              Use to set the background color of an element<br />
              <ul>
                <li><strong>white</strong></li>
                <li><strong>silver</strong></li>
                <li><strong>lightgray</strong></li>
              </ul>

              <h3>Panel Classes</h3>
              <ul>
                <li><strong>panel</strong> - Used with panel markup to create a basic panel with round courners. See templates/panel.html</li>
                <li><strong>pnl-header</strong> - Outlines the panel header</li>
                <li><strong>pnl-footer </strong>- Outlines the panel footer</li>
              </ul>

              <h3>Margins &amp; Padding Classes</h3>
              <ul>
                <li><strong>pad</strong> - Sets padding to 10px</li>
                <li><strong>hlf-pad</strong> - Sets padding to 5px</li>
                <li><strong>dbl-pad</strong> - Sets padding to 20px</li>
                <li><strong>margin</strong> - Sets margin to 10px</li>
                <li><strong>tpm, rtm, bmm, ltm</strong> - Sets top, right, bottom or left margins</li>
              </ul>

              <h3>Position Classes</h3>
              <ul>
                <li><strong>above</strong>  - Absolution position</li>
                <li><strong>left </strong> - float elemnt left</li>
                <li><strong>center</strong> - center element</li>
                <li><strong>top</strong> - Sets top margin-top to 0px</li>
                <li><strong>bottom</strong> - Sets bottom margin to 0px</li>
                <li><strong>front</strong>  - Set z-index to 1000</li>
                <li><strong>back</strong>  - Set z-index to -1000</li>
                <li><strong>fixed</strong> - Fixed Position</li>
              </ul>

              <h3>Prepend &amp; Append Classes</h3>
              Used these classes to append or prepend empty cells to an element
              <ul>
                <li><strong>append1, append2, ..., append10</strong> </li>
                <li><strong>prepend1,</strong> <strong>prepend</strong><strong>2, ...,</strong>
                <strong>prepend10</strong></li>
                <li><strong>prepend-top, append-bottom</strong></li>
              </ul>

              <h3>Push / Pull &amp; Up / Down Classes</h3>
              Use these classes to push or pull an element into a previous cell.
              <ul>
                <li><strong>push1, push2, push3, push4, push5</strong></li>
                <li><strong>pull1, pull2, pull3, pull4, pull5</strong></li>
                <li><strong>up1, up2, up3, up4, up5</strong></li>
                <li><strong>dn1, dn2, dn3, dn4, dn5</strong></li>
              </ul>

              <h3>Table Classes</h3>
              <ul>
				<li><strong>header (deprecated)</strong> - Use tbl-header</li>
				<li><strong>tbl-header</strong> - Use on tr element to style table header</li>
                <li><strong>even</strong> - Use on tr element to style alternate table rows</li>
                <li><strong>sort</strong> - Use on td and the elements to style sorted column</li>
                <li><strong>select</strong> - Use on tr element to style selected row</li>
                <li><strong>hover</strong> - Use on tr element to style row when mouse over.</li>
              </ul>

              <h3>Visibility Classes</h3>
              <ul>
                <li><strong>hide</strong>  - Display none;</li>
                <li><strong>transparent</strong> - Opacity 0.4</li>
              </ul>

              <h3>Image Classes</h3>
              <ul>
                <li><strong>hvspace</strong>  - Margin 1.5em;</li>
              </ul>

              <h3>Misc Classes</h3>
              <ul>
                <li><strong>space</strong> - Creates white horizontal ruler</li>
                <li><strong>clip</strong> - Overflow hidden</li>
                <li><strong>clip-x</strong> - Overflow-x hidden</li>
                <li><strong>clip-y</strong> - Overflow-y hidden</li>
                <li><strong>scrollable</strong> - Overflow auto</li>
                <li><strong>mouse-cursor</strong> - Displays the default mouse pointer</li>
                <li><strong>click-cursor</strong> - Displays the hand or click pointer</li>
                <li><strong>grid-mask</strong> - Show grid lines (for development only)</li>
              </ul>

              <h3>TabStrip Plugin Classes</h3>
              <ul>
                <li><strong>tabstrip</strong> - Converts an unordered list into a horizontal TabStrip</li>
                <li><strong>selected</strong> - Highlights the selected list item (or tab). <br />
                For example: &lt;li class=&quot;selected&quot;&gt;&lt;a href=&quot;#&quot;&gt;Tab1&lt;/a&gt;&lt;/li&gt;
              </ul>

              <h3>Cursor Plugin Clases</h3>
              <ul>
                <li><strong>busy_cursor</strong> - This class is used to define the busy cursor icon for the Cursor plugin</li>
              </ul>


        </div>

        <hr />
        <p class="medium">The Rich Ajax Application Framework. Visit <a href="http://raxanpdi.com">http://raxanpdi.com</a></p>

    </div>

</body>

</html>